/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */

import React, { useEffect, useState } from "react";
import { Button, Drawer, Image, Space, Table, Tag } from "antd";
import type { ColumnsType } from "antd/es/table";
import { useNavigate } from "react-router-dom";
import qs from "query-string";
import Auth from "@/guard/Auth";
import { JoinType, UserInfoType } from "@/types/user";
import { joinGet, joinUpdate, userGet } from "@/api/user";

const JoinList: React.FC = () => {
  let [data, setData] = useState<JoinType[]>([]);
  let [employee, setEmplyee] = useState<UserInfoType>();
  let [open, setOpen] = useState<boolean>(false);
  let [joinId, setJoinId] = useState<string>("");
  let [joinIdx, setJoinIdx] = useState<number>(0);
  const navigate = useNavigate();
  const columns: ColumnsType<JoinType> = [
    {
      title: "岗位名称",
      dataIndex: "jobName",
      key: "jobName",
    },
    {
      title: "岗位薪资",
      dataIndex: "salaryDesc",
      key: "salaryDesc",
    },
    {
      title: "报名状态",
      dataIndex: "status",
      key: "status",
      render: (status, record, index) => {
        let statusArr = ["", "待审核", "已查看", "约面试", "已录取", "已拒绝"];
        return statusArr[status];
      },
    },
    {
      title: "操作",
      key: "action",
      render: (_, record, index) => (
        <Space size="middle">
          <Button
            type="primary"
            size="small"
            onClick={() => {
              handleAudit(record, index);
            }}
          >
            审核
          </Button>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    joinGet().then((res) => {
      setData(res.data.results);
    });
  }, []);
  const handleAudit = (record: JoinType, index: number) => {
    setJoinId(record.objectId); //记录报名id
    setJoinIdx(index);
    //加载报名者信息
    userGet(record.userId).then((res) => {
      console.log(res);
      setEmplyee(res.data);
      setOpen(true);
    });
    // 修改当前报名的状态【已查看】
    joinUpdate(record.objectId, 2).then((res) => {
      data[index].status = 2;
      setData([...data]);
    });
  };
  const handleJoin = (status: number) => {
    joinUpdate(joinId, status).then((res) => {
      data[joinIdx].status = status;
      setData([...data]);
    });
  };
  return (
    <>
      <Table columns={columns} dataSource={data} rowKey="objectId" />
      <Drawer
        open={open}
        onClose={() => {
          setOpen(false);
        }}
      >
        {employee ? (
          <>
            <h3>{employee.name}</h3>
            <h3>{employee.job}</h3>
            <a href={employee.resume} target="_blank">
              查看简历
            </a>
            <Button
              type="primary"
              onClick={() => {
                handleJoin(3);
              }}
            >
              约面试
            </Button>
            <Button
              type="primary"
              onClick={() => {
                handleJoin(4);
              }}
            >
              直接录用
            </Button>
            <Button
              type="primary"
              onClick={() => {
                handleJoin(5);
              }}
              danger
            >
              拒绝录用
            </Button>
          </>
        ) : (
          ""
        )}
      </Drawer>
    </>
  );
};

export default JoinList;
